import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom';

export default function Message() {
  const [messages,setMessage] = useState( [
      {id:'001',title:'消息1',content:'苑少聪'},
      {id:'002',title:'消息2',content:'赵仕祺'},
      {id:'003',title:'消息3',content:'倪向东'},
      {id:'004',title:'消息4',content:'刘同呈'}
    ])
  return (
    <div>
      <ul>
        {
          messages.map((m)=> {
            return(
              <li key={m.id}>
                <Link to="detail" state={{id:m.id,title:m.title,content:m.content}}>{m.title}</Link>
              </li>
            )
          })
        }
        <Outlet/>
      </ul>
    </div>
  )
}
